@charset "UTF-8";
/*导航主要样式*/
.nav {
    overflow: hidden;
    height: r(98);
    background: #fff;
    text-align: center;
    color: $font-color-main;
    display: -webkit-box;
    display: box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    a {
        color: $font-color-main;
    }
    .badge {
        position: absolute;
        font-size: r(24);
        padding: r(4);
        min-width: r(32);
        top: 0;
        left: 50%;
        transform: translateX(50%);
    }
    .bages-s {
        position: absolute;
        top: r(6);
        min-width: r(12);
        left: 50%;
        transform: translateX(50%);
    }
}
.nav-fixed {
    padding-bottom: r(98);
    >.nav {
        position: fixed!important;
        bottom: 0;
        width: 100%;
        left: 0;
        z-index: 1000;
    }
}
.nav-item {
    position: relative;
    height: 100%;
    display: -webkit-box;
    display: box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -webkit-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    i,
    span {
        display: block;
    }
}
.nav-item.active {
    color: $color-main;
}
.nav.bg-main .nav-item {
    @include bg-main;
    &.active {
        background: darken($color-main,4%)!important;
    }
}
.nav.bg-second .nav-item {
    @include bg-second;
    &.active {
        background: darken($color-second,4%)!important;
    }
}
.nav.bg-red .nav-item {
    @include bg-red;
    &.active {
        background: darken($color-red,4%)!important;
    }
}
.nav.bg-blue .nav-item {
    @include bg-blue;
    &.active {
        background: darken($color-blue,4%)!important;
    }
}
.nav.bg-green .nav-item {
    @include bg-green;
    &.active {
        background: darken($color-green,4%)!important;
    }
}
.nav.bg-orange .nav-item {
    @include bg-orange;
    &.active {
        background: darken($color-orange,4%)!important;
    }
}